<template>
	<view class="cnt">
		<view v-if="showMore" class="more-box">
			<view class="more-row" @click="moreItemClick(1)">
				<image src="@/static/img/icon-msg.png" style="width: 36rpx; height: 36rpx;"></image>
				<view class="more-i-txt">我的消息</view>
			</view>
			<view class="more-row" @click="moreItemClick(2)">
				<image src="@/static/img/icon-clock.png" style="width: 36rpx; height: 36rpx;"></image>
				<view class="more-i-txt">修改时间</view>
			</view>
			<view class="more-row" @click="moreItemClick(3)">
				<image src="@/static/img/icon-send.png" style="width: 36rpx; height: 36rpx;"></image>
				<view class="more-i-txt">重新发布</view>
			</view>
			<view class="more-row" @click="moreItemClick(4)">
				<image src="@/static/img/icon-cancel.png" style="width: 36rpx; height: 36rpx;"></image>
				<view class="more-i-txt">取消行程</view>
			</view>
		</view>
		
		<view class="status-box" @click="showMore=!showMore">
			<view>
				{{detail.statusStr}}
			</view>
			<image src="@/static/img/more.png" style="width: 50rpx; height: 50rpx;"></image>
						
		</view>
		<view class="detail-box">
			<view class="title-box" @click="detailOpend=!detailOpend">
				<view v-if="detailOpend">行程详情</view>
				<view v-else>
					{{detail.startShowAddress}}
					<image src="@/static/img/single-arrow-right.png" style="width: 34rpx; height: 14rpx;"></image>
					{{detail.endShowAddress}} 
				</view>
				<text class="iconfont icon-xiajiantou" ></text>
			</view>
			<view v-if="detailOpend">
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view style="display: flex; justify-content: flex-start; align-items: center;">
						<image src="@/static/img/start-time.png" style="width: 26rpx; height: 26rpx;"></image>
						<view class="detail-time">
							{{detail.timeStr}}
						</view>
					</view>
					<view style="display: flex; justify-content: flex-start; align-items: center;">
						<image src="@/static/img/icon-seats.png" style="width: 26rpx; height: 34rpx;"></image>
						<view class="detail-time">
							{{detail.seats}}座
						</view>
					</view>
					<view style="display: flex; justify-content: flex-start; align-items: center;">
						<view>
							{{detail.price}}元/座
						</view>
						<image src="@/static/img/client-trip/pre-price.png" style="width: 35rpx; height: 35rpx;"></image>
					</view>
				</view>
				<view class="start-item">
					<view class="start-item-icon"></view>
					<view class="uni-input start-item-cnt">
						{{detail.startShowAddress}}
					</view>
				</view>
				<view class="end-item">
					<view class="end-item-icon"></view>
					<view class="uni-input end-item-cnt">
						{{detail.endShowAddress}}
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view>
						等待出发乘客列表
					</view>
					<view>
						<image :src="it.avatar" v-for="(it, idx) in detail.clientList" class="client-avatar"></image>
					</view>
					<image src="@/static/img/icon-arrow-right.png" style="width: 32rpx; height: 24rpx;"></image>
				</view>
			</view>
		</view>
		<view style="margin: 30rpx 0; display: flex; gap: 30rpx">
			<view :class="0===activedTitle ? 'list-title-actived' : 'list-title'" @click="changeTitle(0)">顺路订单</view>
			<view :class="1===activedTitle ? 'list-title-actived' : 'list-title'" @click="changeTitle(1)">邀请订单</view>
		</view>
		<view v-if="0===activedTitle" class="body-cnt">
			<view v-if="detail.matchWayList && detail.matchWayList.length > 0" class="sfc-list-box">
				<view class="list-item" v-for="(item,index) in detail.matchWayList">
					<view style="display: flex; justify-content: space-between; height: 97rpx;">
						<image :src="item.avatar" style="width: 97rpx; height: 97rpx; border-radius: 97rpx;"></image>
						<view style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="display: flex; justify-content: space-between; gap: 20rpx">
								<view class="m-time">{{item.startTimeStr}}</view>
								<view class="m-match-way">{{item.matchPercent}}%顺路</view>
							</view>
							<view style="display: flex; align-items: center; gap: 20rpx">
								<view class="m-scope">{{item.seats}}人</view>
								<view class="m-scope">|</view>
								<view class="m-scope">取消率{{item.cancelPercent}}%</view>
							</view>
						</view>
						<view class="m-seats">预估￥{{item.preAmount}}</view>
					</view>
					<view class="start-item" style="margin-top: 30rpx;">
						<view class="start-item-icon"></view>
						<view class="uni-input start-item-cnt">
							{{item.startShowAddress}}
							<text class="m-km">
								{{item.startDistance ? ' ' + item.startDistance + 'km' : ''}}
							</text>
						</view>
					</view>
					<view style="display: flex; justify-content: space-between; margin-top: 30rpx;">
						<view class="end-item">
							<view class="end-item-icon"></view>
							<view class="uni-input end-item-cnt">
								{{item.endShowAddress}}
								<text class="m-km">
									{{item.endDistance ? ' ' + item.endDistance + 'km' : ''}}
								</text>
							</view>
						</view>
						<view style="display: flex; justify-content: right; gap: 30rpx;">
							<image src="@/static/img/icon-phone.png" style="width: 49rpx; height: 50rpx;" @click="toCall(item.mobile)"></image>
							<image src="@/static/img/icon-msg.png" style="width: 47rpx; height: 50rpx;" @click="toSendMsg(item)"></image>
						</view>
					</view>
					<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx; padding-top: 20rpx; border-top: 1rpx solid #DFDFDF;">
						<view class="wait-pay-txt">{{item.statusStr}}</view>
						<view v-if="-1 === item.status" class="match-btn" @click="toMatch(item)">确认同行</view>
					</view>
				</view>
			</view>
			<view v-else class="no-data-box">
				<image src="@/static/img/no-data.png" style="width: 412rpx; height: 304rpx;"></image>
				<view class="no-data-txt">暂未找到顺路乘客</view>
			</view>
		</view>
		<view v-if="1===activedTitle" class="body-cnt">
			<view v-if="detail.inviteList && detail.inviteList.length > 0" class="sfc-list-box">
				<view style="position: relative;" v-for="(item,index) in detail.inviteList">
					<view class="i-send-type">{{item.sendType===0 ? '乘客邀请' : '车主邀请'}}</view>
					<view class="list-item">
						<view class="i-starttime">
							{{item.startTimeStr}} 出发
						</view>
						<view class="flex-base" style="margin-top: 10rpx;">
							<view class="i-match-percent">{{item.matchPercent}}%顺路</view>
							<view class="i-seats">{{item.seats}}座位</view>
						</view>
						<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 40rpx;">
							<view class="flex-base" style="gap: 26rpx">
								<image :src="item.avatar" style="width: 97rpx; height: 97rpx; border-radius: 97rpx;"></image>
								<view style="display: flex; flex-direction: column; justify-content: space-between">
									<view class="i-mobilelast4">尾号{{item.mobileLast4}}</view>
									<view class="i-cancel-percent">取消率{{item.cancelPercent}}%</view>
								</view>
							</view>
							<view style="display: flex; justify-content: right; gap: 30rpx;">
								<image src="@/static/img/icon-phone.png" style="width: 49rpx; height: 50rpx;" @click="toCall(item.mobile)"></image>
								<image src="@/static/img/icon-msg.png" style="width: 47rpx; height: 50rpx;" @click="toSendMsg(item)"></image>
							</view>
						</view>
						<view class="i-status-box">
							<view class="i-status">{{item.statusStr}}</view>
							<view class="i-btn-box" v-if="item.sendType === 0 && item.status===0">
								<view class="cancel-btn" @click="toRejectOrder(item)">拒绝</view>
								<view class="match-btn" @click="toAck(item)">确认同行</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-data-box">
				<image src="@/static/img/no-data.png" style="width: 412rpx; height: 304rpx;"></image>
				<view class="no-data-txt">暂无邀请订单</view>
			</view>
		</view>
		<view class="stop-receive">
			<view class="btn" v-if="1===detail.status" @click="stopReceiveOrder">停止接单</view>
		</view>
		
	</view>
</template>

<script>
	import {driverTripDetail,driverInviteClient,driverRejectClient,driverAgreeClient,driverStopReceiveOrder,
			driverCancelTrip} 
	from '@/api/api.js';
	
	export default {
		data() {
			return {
				id:null,
				activedTitle: 0,
				detailOpend: false,
				detail:{},
				showMore:false
			}
		},
		onLoad(option) {
			console.log('aaa',option)
			if(option && option.id){
				this.id = option.id;
				this.getDetail(option.id);
			}
		},
		methods: {
			getDetail(id){
				driverTripDetail(id).then(res=>{
					console.log(res)
					this.detail = res.data;
				})
			},
			changeTitle(n){
				this.activedTitle = n;
			},
			toCall(no){
				uni.makePhoneCall({
					phoneNumber: no
				});
			},
			toSendMsg(item){
				console.log('to msg')
			},
			// 车主邀请乘客
			toMatch(item){
				let p = {
					clientTripId: item.clientTripId,
					driverTripId: this.detail.id
				}
				driverInviteClient(p).then(res=>{
					if(res && res.data){
						item.status = 0;
						item.statusStr = '等待乘客确认并支付';
						// 更新数据
						this.getDetail(this.id);
						this.activedTitle = 1;
					}
				})
			},
			// 确认同行（接受乘客邀请）
			toAck(item){
				let p = {
					clientTripId: item.clientTripId,
					driverTripId: this.detail.id
				}
				driverAgreeClient(p).then(res=>{
					if(res && res.data){
						item.status = 1;
						item.statusStr = '等待乘客完成支付';
						// 更新数据
						this.getDetail(option.id);
						this.activedTitle = 1;
					}
				})
			},
			// 拒绝乘客邀请
			toRejectOrder(item){
				let p = {
					clientTripId: item.clientTripId,
					driverTripId: this.detail.id
				}
				driverRejectClient(p).then(res=>{
					if(res && res.data){
						item.status = 3;
						item.statusStr = '已拒绝与该乘客同行';
						// 更新数据
						this.getDetail(this.detail.id);
						this.activedTitle = 0;
					}
				})
			},
			stopReceiveOrder(){
				driverStopReceiveOrder(this.detail.id).then(res=>{
					if(res && res.data){
						this.getDetail(this.detail.id);
					}
				})
			},
			moreItemClick(n){
				console.log(n);
				switch(n){
					case 1:
						// 我的消息
						break;
					case 2:
						// 修改时间
						break;
					case 3:
						// 重新发布
						break;
					case 4:
						// 取消行程
						this.doCancelTrip();
						break;
				}
				this.showMore = false;
			},
			doCancelTrip(){
				driverCancelTrip(this.detail.id).then(res=>{
					if(res && res.data){
						uni.redirectTo({
							url: '/pages/xyqc/sfc/driver/driver'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cnt{
		background-color: #F6F6F6;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.status-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.detail-box{
		padding: 30rpx 30rpx;
		background: #FFFFFF linear-gradient(180deg, #F7FFFA 0%, #FFFFFF 100%);
		border-radius: 21rpx;
	}
	.title-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.detail-time{
		height: 35rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	.start-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.start-item-icon{
		width: 17rpx;
		height: 17rpx;
		background: #6FC65E;
		border-radius: 16rpx;
	}
	.start-item-cnt{
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
		
	}
	.end-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.end-item-icon{
		width: 17rpx;
		height: 17rpx;
		background: #EC7F2F;
		border-radius: 16rpx;
	}
	.end-item-cnt{
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}
	
	.list-title{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	.list-title-actived{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 47rpx;
	}
	.list-item{
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 21rpx;
		margin-top: 20rpx;
	}
	.sfc-list-box{
		display: flex;
		flex-direction: column;
	}
	.no-data-box{
		margin-top: 180rpx;
		text-align: center;
	}
	.no-data-txt{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	.client-avatar{
		width: 50rpx;
		height: 50rpx;
		border-radius: 30rpx;
	}
	
	
	
	.wait-pay-txt{
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	.match-btn{
		width: 197rpx;
		height: 69rpx;
		background: #6FC65E;
		border-radius: 42rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		text-align: center;
	}
	.m-time{
		height: 52rpx;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 52rpx;
	}
	.m-match-way{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	.m-seats{
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}
	.m-scope{
		height: 35rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 35rpx;
	}
	.m-km{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	
	.i-send-type{
		position: absolute;
		right: 0;
		top: 20rpx;
		width: 133rpx;
		height: 52rpx;
		background: linear-gradient(153deg, #F7B65C 0%, #EC7F2F 100%);
		border-radius: 0rpx 21rpx 0rpx 69rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 52rpx;
		text-align: center;
	}
	.i-starttime{
		height: 52rpx;
		font-size: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 52rpx;
	}
	.flex-base{
		display: flex;
		gap: 40rpx;
	}
	.i-match-percent, .i-seats{
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 41rpx;
	}
	.i-mobilelast4{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 47rpx;
	}
	.i-cancel-percent{
		height: 35rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 35rpx;
	}
	
	
	.i-status-box{
		margin-top: 48rpx;
		border-top: 1rpx solid #DFDFDF;
	}
	.i-status{
		height: 80rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 80rpx;
		text-align: center;
	}
	.i-btn-box{
		display: flex;
		justify-content: flex-end;
		gap: 30rpx;
	}
	
	.cancel-btn{
		width: 139rpx;
		height: 69rpx;
		border-radius: 42rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 69rpx;
		text-align: center;
	}
	
	.body-cnt{
		padding-bottom: 120rpx;
	}
	.stop-receive{
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		right: 30rpx;
		.btn{
			width: 100%;
			height: 94rpx;
			background: #6FC65E;
			border-radius: 47rpx;
			font-size: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 94rpx;
			text-align: center;
		}
	}
	
	.more-box{
		position: absolute;
		z-index: 9999;
		right: 30rpx;
		top: 100rpx;
		background-color: #FFFFFF;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		gap: 50rpx;
		box-shadow: 0rpx 0rpx 13rpx 2rpx rgba(194,194,194,0.5);
		border-radius: 21rpx;
		.more-row{
			display: flex;
			justify-content: space-between;
			gap: 50rpx;
			.more-i-txt{
				font-size: 29rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
